'use client';

import { useState } from 'react';
import Link from 'next/link';

export default function Home() {
  // const [selectedTask, setSelectedTask] = useState(null);

  // 静态数据模拟
  // const clinicalscenes = [
  //   { id: 'pneumonia', name: '肺炎X光', description: '肺炎检测和分析' },
  //   { id: 'liver-cancer', name: '肝癌CT', description: '肝癌筛查和诊断' },
  //   { id: 'brain-tumor', name: '脑肿瘤MRI', description: '脑肿瘤检测和分割' },    
  //   { id: 'breast-cancer', name: '乳腺癌超声', description: '乳腺癌早期检测' },
  //   { id: 'retinal-disease', name: '视网膜疾病', description: '眼底疾病诊断' }
  // ];
  // 真实需求
  const clinicalscenes = [
    { id: 'lung-nodule', name: '肺结节CT', description: '结节检测、分割与良恶性分类' },
    { id: 'pneumonia', name: '肺炎X光', description: '病原体识别、重症风险分层、耐药性预测' },
    { id: 'copd', name: '慢阻肺CT', description: '病灶区域分割与分级评估' },
    { id: 'liver-cancer', name: '肝癌CT', description: '肿瘤分割与分型/分期' },
    { id: 'fatty-liver', name: '脂肪肝超声', description: '病灶区域分割与分期诊断' }
  ];

  return (
    <div className="min-h-screen bg-gray-50">
      <div className="container mx-auto px-4 py-8">
        <header className="text-center mb-8">
          <h1 className="text-3xl font-bold text-gray-900 mb-2">
            医学影像处理平台
          </h1>
          <p className="text-gray-600">
            选择临床应用场景开始分析
          </p>
        </header>

        <main className="max-w-4xl mx-auto">
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {clinicalscenes.map((scene) => (
              <Link
                key={scene.id}
                href={`/dataset?clinicalscene=${scene.id}`}
                className="block"
              >
                <div className="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-shadow cursor-pointer">
                  <h3 className="text-xl font-semibold text-gray-900 mb-2">
                    {scene.name}
                  </h3>
                  <p className="text-gray-600">
                    {scene.description}
                  </p>
                  <div className="mt-4 text-blue-600 font-medium">
                    开始分析 →
                  </div>
                </div>
              </Link>
            ))}
          </div>
        </main>
      </div>
    </div>
  );
}
